<template>
	<view>
		<top> </top>
		<view class="list">
			<view class="item dpflex" v-for="item in list" :key="item.id" @click="hotInfoBtn(item.id)">
				<view class="text flex1">
							<view class="title">
								{{item.title}}
							</view>
							<view class="author">
									作者:{{item.author}}
							</view>
				</view>
				<image v-if="item.imgs" :src="item.imgs" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import Top from '@/components/top.vue'
	import {hotList} from '@/api/hot.js'
	export default {
		components:{
			Top
		},
		data() {
			return {
				pageData:{
					page:1,
					pagesize:10,
				},
				list:[]
			};
		},
		created() {
			this.getHotList()
		},
		methods:{
			async getHotList(){
				let res = await hotList(this.pageData)
				console.log(res);
				this.list.push(...res.data)
			},
			hotInfoBtn(id){
				uni.navigateTo({
					url:'/pages/hot/hotInfo?id='+id
				})
			}
		},
		// 懒加载
		onReachBottom() {
			this.pageData.page++;
			this.getHotList()
		}
	}
</script>

<style lang="scss" scoped>
.item{
		width: 90%;
		margin: 0 auto;
		padding: 20rpx 0;
		height: 200rpx;
		border-bottom: 1px solid #ccc;
		align-items: center;
		image{
			margin-left: 15rpx;
			width: 300rpx;
			height: 200rpx;
			
		}
		.title{
			width: auto;
			max-height: 140rpx;
			line-height: 70rpx;
			font-weight: 600;
			font-size: 40rpx;
			overflow:hidden;
			text-overflow:ellipsis;
			display:-webkit-box;
			-webkit-box-orient:vertical;
			-webkit-line-clamp:2;
		}
	}
</style>
